<template>
  <div class="layout-all">
    <div class="layout-content">
      <el-row :gutter="8">
        <el-col :xs="24" :sm="24" :lg="6">
          <el-button
            type="warning"
            icon="el-icon-document-copy"
            style="margin-left: 5px"
            @click="change_visible = true"
            >修改记录</el-button
          >
          <router-link :to="'./form/'" style="margin-left: 5px">
            <el-button
              type="primary"
              icon="el-icon-plus"
              style="margin-left: 0px"
              >添加</el-button
            >
          </router-link>
          <div style="padding-top: 20px">
            <div
              style="margin: 5px; display: inline-block"
              v-for="(item, index) in configOptions"
              :key="item.id"
            >
              <el-button
                style="width: 120px"
                :class="index == indexClass ? 'active' : ''"
                @click="changeConfig(item.value, index)"
                >{{ item.label }}</el-button
              >
            </div>
          </div>
          <el-button
            type="success"
            v-if="info.SEPARATE_ISSUE!=undefined"
            icon="el-icon-document-copy"
            style="margin-left: 5px"
            @click="menu_visible = true"
            >菜单管理</el-button
          >
        </el-col>
        <el-col :xs="24" :sm="24" :lg="18">
          

          <el-table
            :data="tableData"
            stripe
            highlight-current-row
            style="width: 100%; margin-top: 20px; border: 1px solid #eee"
          >
            <el-table-column align="left" prop="description"  label="描述" width="250" />

            <el-table-column align="left" prop="value" label="值" width="250">
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.data_type === 'text'"
                  type="text"
                  disable-transitions
                  v-model="scope.row.value"
                />
                <el-input
                  v-if="scope.row.data_type === 'file'"
                  type="textarea"
                  disable-transitions
                  v-model="scope.row.value"
                />
                <el-input
                  v-if="scope.row.data_type === 'date'"
                  type="date"
                  disable-transitions
                  v-model="scope.row.value"
                />
                <div @click="uploadImg(scope.row)" v-if="scope.row.data_type === 'img'">
                  <upload-pic :thumb="scope.row.value" @update:thumb="upload" width="100"/>
                  
                </div>
                <el-color-picker
                  v-if="scope.row.data_type === 'color'"
                  v-model="scope.row.value"
                ></el-color-picker>
                <el-checkbox
                  v-if="scope.row.data_type === 'check'"
                  v-model="scope.row.value"
                ></el-checkbox>
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" prop="key" label="键" width="250" />
        <el-table-column align="center" prop="data_type" label="类型" width="120" /> -->
            <el-table-column
              align="center"
              prop="telephone"
              width="180"
              label="操作"
            >
              <template slot-scope="scope">
                <router-link :to="'./form/' + scope.row.id">
                  <el-button size="small" type="primary" icon="el-icon-edit" />
                </router-link>

                <el-button
                  type="success"
                  size="small"
                  icon="el-icon-check"
                  @click="onSave(scope.row)"
                ></el-button>
                <el-button
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  v-if="scope.row.data_type == 'img'"
                  @click="onDel(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 更改记录 -->
      <drawer title="更改记录" :isShow="change_visible"  @update:isShow="change_visible=false" width=".5">
        <change-log />
      </drawer>
      <drawer title="菜单管理" :isShow="menu_visible"  @update:isShow="menu_visible=false" width=".8">
          <div class="app-container">
            <el-row>
              <el-col :span="24">
                <div>
                  <el-button type="primary" icon="el-icon-plus" @click="menu_edit_visible=false;id=0;menu_edit_visible=true">添加菜单</el-button>
                </div>
              </el-col>
            </el-row>
            <hr />
            <menu-list request_url="/admin/Menu/" module="admin" @edit="onEdit"></menu-list>
          </div>
      </drawer>
        <drawer title="修改菜单" :isShow="menu_edit_visible"  @update:isShow="menu_edit_visible=false" width=".3" :append="true">
          <menu-form request_url="/admin/Menu/" :id="id" @bk="$event==1?menu_visible=false:'';menu_edit_visible=false"/>
      </drawer>
    </div>
  </div>
</template>

<script>

import changeLog from "../../components/tool/changeLog";
import menuList from "../../components/classify/menuList";
import menuForm from "../../components/classify/menuForm";
export default {
  name:'config_index',
  components: {  changeLog,menuList,menuForm },
  computed: {
    group() {
      return this.$store.state.user.config_group
    },
    info(){
      return this.$store.state.user.info
    },
  },
  data() {
    return {
      change_visible: false,
      menu_visible: false,
      menu_edit_visible: false,
      indexClass: 0,
      id: 0,
      
      form: {},
      upload_thumburl: "",
      config: [
        {
          type: "select",
          placeholder: "请选择分类",
          field: "group",
          val: "base",
          options: [],
        },
      ],
      configOptions: [],
      value: "",
      searchWhere: {
        group: "base",
      },
      tableData: [],
      total: 0,
      current_page: 1,
      per_page: 14,
    };
  },
  activated(){
    if(this.$getUpdate()){
      this.onSearch()
    }
  },
  created() {
    this.onSearch();
    this.upload_thumburl = process.env.VUE_APP_BASE_API + "/pub/Upload/upload";
  },
  methods: {
    uploadImg(obj) {
      this.form = obj;
    },
    upload(res) {
      this.form.value = res;
      this.get("/admin/Config/save", this.form, "POST").then((e) => {
        this.$msg_ok("success", "保存成功");
        this.onSearch();
      });
    },
    // 查询
    handleSizeChange(val) {
      this.onSearch();
    },
    handleCurrentChange(val) {
      this.current_page = val;
      this.onSearch();
    },
    changeConfig(value, index) {
      this.indexClass = index;
      this.searchWhere.group = value;
      this.$store.commit('user/SET_CONFIG_GROUP', value)
      this.onSearch();
    },
    onSearch() {
      const form = {};
      form.page = this.current_page;
      form.group = this.searchWhere.group;
      this.get("/admin/Config/index", form, "POST").then((e) => {
        this.config[0].options = e.group_arr_select;
        this.configOptions = e.group_arr_select;

        var tableData = e.list.data;

        tableData.forEach(function (item, index) {
          if (item.data_type == "check") {
            tableData[index].value = tableData[index].value == 1 ? true : false;
          }
        });
        this.tableData = tableData;
        console.log(this.tableData);
        this.per_page = e.list.per_page;
        this.total = e.list.total;
        this.current_page = e.list.current_page;
      });
    },
    onSave(obj) {
      this.form = obj;
      if (this.form.data_type === "check") {
        this.form.value === false
          ? (this.form.value = "0")
          : (this.form.value = "1");
      }

      this.get("/admin/Config/save", this.form, "POST").then((e) => {
        this.$msg_ok("success", "保存成功");
        this.onSearch();
      });
    },
    // 添加
    onAdd() {},
    // 编辑
    onEdit(id) {
      this.id=id;
      this.menu_edit_visible=true
    },
    // 删除
    onDel(obj) {
      if (obj.value == "") {
        return;
      }
      this.$msg_confirm().then((e) => {
        if (e) {
          this.form = obj;
          this.form.value = "";
          this.get("/admin/Config/save", this.form, "POST").then((e) => {
            // this.$msg_ok("success", "删除成功");
            this.onSearch();
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
.active {
  background: lightblue;
}
</style>
